<template>
  <scroll ref="scroll" style="touch-action: none">
    <div class="comment">
      <div
        class="category"
        v-if="commentInfo[1] && commentInfo[1].data.length > 0"
      >
        <span
          class="category-item"
          v-for="(item, index) in this.commentInfo[1].data"
          @click="clickCategory(index)"
          :class="{ cactive: index === currentIndex }"
          >{{ item.name }}({{ item.count }})</span
        >
      </div>
      <div v-if="commentInfo[0] && commentInfo[0].data.length > 0">
        <div class="specific" v-for="item in commentInfo[0].data">
          <div id="top">
            <div class="portrait"></div>
            <div class="user">
              <div class="name">{{ item.username }}</div>
              <div>
                服务 <span>{{ item.rating_star }}分</span> 商品
                <span>满意</span>
              </div>
            </div>
            <div class="time">
              <div>{{ item.rated_at }}</div>
              <div>{{ item.time_spent_desc }}</div>
            </div>
          </div>
          <div id="middle" v-if="item.rating_text">{{ item.rating_text }}</div>
          <div id="middle" v-else>无</div>
          <div id="bottom">
            <span v-for="iitem in item.item_ratings">{{
              iitem.food_name
            }}</span>
          </div>
          <div id="reply">
            <div>商家回复</div>
            <p>谢谢！</p>
          </div>
        </div>
      </div>

      <div id="show"></div>
    </div>
  </scroll>
</template>

<script>
import Scroll from "components/scroll/Scroll";

export default {
  name: "comment",
  data() {
    return {
      currentIndex: 0,
      saveY: 0,
    };
  },
  props: {
    commentInfo: {
      type: Array,
    },
  },
  components: {
    Scroll,
  },
  watch: {},
  methods: {
    clickCategory(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style scoped>
.comment {
  font-size: 14px;
  background-color: rgb(252, 252, 252);
  /* width: 100%; */
  border-top: 1px solid rgb(221, 221, 221);
    position: absolute;
  /* padding-bottom: 60px; */
  /* margin-top: 10px; */
  top: 275px;
  bottom: 100px;
  left: 0;
  right: 0;
}
.comment .category {
  margin: 10px;
  font-size: 12px;
  color: rgb(73, 73, 73);
}
.comment .category .category-item {
  display: inline-block;
  text-align: center;
  width: fit-content;
  height: 18px;
  line-height: 18px;
  padding: 4px;
  border: none;
  background-color: rgb(230, 230, 230);
  margin-right: 6px;
  margin-bottom: 5px;
  white-space: normal;
}
.comment .category .cactive {
  background-color: #49bdf3;
  color: white;
}

.comment .specific {
  margin: 5px 10px 20px 10px;
  position: relative;
  font-size: 12px;
  color: rgb(97, 97, 97);
}
.specific > div {
  margin-bottom: 4px;
}
#top .portrait {
  width: 40px;
  height: 40px;
  background-color: purple;
}
#top .user {
  position: absolute;
  top: 0;
  left: 50px;
}
#top .user div,
#top .time div {
  line-height: 20px;
}
#top .user .name {
  font-size: 14px;
  font-weight: bolder;
  color: black;
}
#top .time {
  position: absolute;
  top: 0;
  right: 10px;
}

#bottom span {
  display: inline-block;
  width: fit-content;
  text-align: center;
  background-color: #a5daf3;
  color: #024da3;
  padding: 1px;
  height: 15px;
  margin-right: 5px;
  margin-bottom: 5px;
  opacity: 0.7;
  white-space: normal;
}
#reply {
  background-color: rgb(238, 238, 238);
  padding: 10px;
}
#reply div {
  color: black;
  font-weight: bolder;
  margin-bottom: 4px;
}
#reply p {
  margin: 0;
}
#show {
  margin-bottom: 70px;
}
</style>